import React, { useState, useEffect } from 'react';
import { Row, Col, Input, Tabs, Table, Button, message, Icon, InputNumber } from 'antd';
import services from 'src/services/api';
const { Search, TextArea } = Input;
const { TabPane } = Tabs;
export default function(props) {
  const [keyword, setKeyword] = useState('');
  const [participation, setParticipation] = useState([]);
  const [participate, setParticipate] = useState([]);
  const [requestData, setRequestData] = useState({});
  const [responseData, setResponseData] = useState({});

  const [testLoading, useTestLoading] = useState(false);
  const api = props.api || 'model';
  useEffect(() => {
    detail(0);
  }, []);
  function testURL() {
    useTestLoading(true);
    // const newParams = [requestData]
    // for(let key in requestData) {
    //    const params = {[key]: requestData[key]}
    //    newParams.push(params)
    // }
    const params = {params: JSON.stringify(requestData)};
    if (api === 'model') {
      // params.deploy_name = '';
      // params.model_list_id = props.record.model_list_id;
      params.deploy_name = props.record.name;
      // params.service_id = props.record.service_id;
      // params.model_list_id = props.record.model_list_id;
      // params.service_id = props.record.service_id;
    } else if (api === 'modelConfig') {
      params.deploy_name = props.record.deploy_name;
      // params.model_list_id = '';
      // params.service_id = '';
      // params.service_id = props.record.service_id;
    }
    services[api].testModel(params).then((res) => {
      if (res.code === 0) {
        setResponseData(res.data);
      } else {
        message.error(res.msg);
      }
      useTestLoading(false);
    });
  }
  function detail(out_code) {
    const params = {
      in_or_out: out_code
    };
    if (api === 'model') {
      params.model_list_id = props.record.model_list_id;
      // let {name} = props.record;
      // params.model_code = name;
      // params.model_version = 'v1';
      // params.current_page = 0;
      // params.page_size = 10;
    } else if (api === 'modelConfig') {
      // params.service_id = props.record.service_id;
      let {model_code, model_version} = props.record;
      params.model_code = model_code;
      params.model_version = model_version;
      params.current_page = 0;
      params.page_size = 10;
    }
    services[api].parameter(params).then((res) => {
      if (res.code === 0) {
        if (!out_code) {
          setParticipation(res.data.list || []);
          return
        }
        // setParticipation(res.data.list || []);
        setParticipate(res.data.list || []);
      }
    });
  }
  function tabsCallback(key) {
    detail(key - 1);
  };
  const columnsTestIn = [
    {
      title: '字段名',
      dataIndex: 'column_name',
      key: 'column_name',
    },
    {
      title: '类型',
      dataIndex: 'column_type',
      key: 'column_type',
    },
    {
      title: '输入值',
      dataIndex: 'code',
      key: 'code',
      render: (text, record) => {
        const type_numbers = ['double', 'float', 'long', 'int'];
        return (
          <>
            {type_numbers.includes(record.column_type) ? (
              <InputNumber
                style={{ width: '150px' }}
                value={requestData[record.column_name]}
                onChange={(value) => {
                  const requestNewData = {
                    ...requestData,
                    [record.column_name]: value || 0,
                  };
                  setRequestData(requestNewData);
                }}
              />
            ) : (
              // record.data_type === 'boolean' ? <Select onChange={value => {
              //   const requestNewData = {
              //     ...requestData,
              //     [record.code]: value || 0
              //   };
              //   setRequestData(requestNewData);
              // }}>
              //   <Select.Option value='true'>true</Select.Option>
              //   <Select.Option value='false'>false</Select.Option>
              // </Select>
              <Input
                value={requestData[record.column_name]}
                style={{ width: '150px' }}
                onChange={(e) => {
                  const requestNewData = {
                    ...requestData,
                    [record.column_name]: e.target.value,
                  };
                  setRequestData(requestNewData);
                }}
              />
            )}
          </>
        );
      },
    },
  ];
  const columnsTestOut = [
    {
      title: '字段名',
      dataIndex: 'column_name',
      key: 'column_name',
    },
    {
      title: '类型',
      dataIndex: 'column_type',
      key: 'column_type',
    },
  ];
  return (
    <div className='tantuer'>
      <Row gutter={20}>
        <Col span={14}>
          <div style={{ position: 'absolute', width: '30%', right: '10px', top: '5px', zIndex: 1 }}>
            <Search placeholder='请输入字段名' onSearch={(value) => setKeyword(value)} allowClear />
          </div>

          <Tabs defaultActiveKey='1' onChange={tabsCallback}>
            <TabPane tab='输入参数' key='1'>
              <Table
                columns={columnsTestIn}
                dataSource={participation.filter(
                  (it) =>
                    it.model_code.toLowerCase().indexOf(keyword.toLowerCase()) !== -1 ||
                    it.column_name.toLowerCase().indexOf(keyword.toLowerCase()) !== -1
                )}
                rowKey={(record) => record.model_code + record.column_name}
                className='fixed'
                pagination={{
                  size: 'small',
                }}
              />
            </TabPane>
            <TabPane tab='输出参数' key='2'>
              <Table
                columns={columnsTestOut}
                dataSource={participate.filter(
                  (it) =>
                    it.model_code.toLowerCase().indexOf(keyword.toLowerCase()) !== -1 ||
                    it.column_name.toLowerCase().indexOf(keyword.toLowerCase()) !== -1
                )}
                pagination={{
                  size: 'small',
                }}
                rowKey={(record) => record.model_code + record.column_name}
                className='fixed'
              />
            </TabPane>
          </Tabs>
        </Col>
        <Col span={10} className='tantuer-form' style={{ marginTop: '10px' }}>
          <div className='tantuer-field-area'>
            <div className='form-title'>请求内容</div>
            <TextArea rows={12} value={JSON.stringify(requestData)} />
          </div>
          <div className='tantuer-field-area'>
            <div className='form-title'>返回内容</div>
            <TextArea rows={12} disabled value={JSON.stringify(responseData)} />
          </div>
        </Col>
      </Row>
      <div className='form-btn' style={{ marginTop: '20px' }}>
        <Button type='primary' onClick={() => testURL()} disabled={Object.keys(requestData).length === 0}>
          {testLoading && <Icon type='loading' />}
          测试
        </Button>
        <Button
          className='marl10'
          autoFocus={true}
          onClick={() => {
            props.closeModal(true);
          }}
        >
          返回
        </Button>
      </div>
    </div>
  );
}
